<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>openyelp</title>
<link rel="stylesheet" href="${siteurl}assets/css/www-pkg.css" />
[#include "/theme/yelp/common/scripts.html"]
	
	
	<script charset="utf-8"
	src="${siteurl}assets/plugs/uploader/dmuploader.min.js"></script>	
<link rel="stylesheet"
	href="${siteurl}assets/plugs/uploader/uploader.css" />	
	
	
</head>

<body class="country-hk logged-out ytype jquery" id="yelp_main_body"
	ryt13230="1">

	<div id="fb-root"></div>

	<div class="lang-en" id="wrap">



		[#include "/theme/yelp/common/header.html"]

		<div id="print-masthead">
			<img alt="Yelp" class="print-bkg-img"
				src="http://s3-media2.fl.yelpcdn.com/assets/2/www/img/b7e9d647188d/gfx/header_print.gif">
		</div>

		<span class="offscreen" id="page-content">&nbsp;</span>

		<div class="main-content-wrap main-content-wrap--box">

			<div class="content-container" id="super-container">



                <div class="clearfix page-header">
<h2 class="heading">新增相片到<a href="${siteurl}events/view.htm?id=${event.id}">${event.name!""}</a></h2>
            <a class="floatLink" href="${siteurl}events/view.htm?id=${event.id}">返回</a>

</div>
				<div class="container add-event-photos">
					
					<div class="clearfix layout-block layout-full">
						<div class="column column-alpha ">

							<div id="file-uploader">

							
							
							         <div class="form-group">
            <form action="${siteurl}events/addimages.htm" class="yform ytype" enctype="multipart/form-data" id="upload_new_photo" method="POST" name="upload_new_photo">
                	<input type="hidden" name="id" value="${event.id}">
                <label class="col-sm-2"></label>
                <div class="col-sm-8">
                    <!-- D&D Zone-->
                    <div id="drag-and-drop-zone" class="uploader">
                        <div class="browser"  style="margin-top: 15px;margin-bottom: 10px;">
                            <label >
                                <span>点击选择图片</span>
                                <input class="ybtn ybtn-primary ybtn-small ytype" type="file" name="files[]" accept="image/*" multiple="multiple" title='点击添加图片'/>
                            </label>
                        </div>
                    </div>
                    <!-- /D&D Zone -->

                    <div class="panel panel-default">
                        <div class="panel-body demo-panel-files" id='upload-albums'>
                            <span class="demo-note">您还没有上传图片</span>
                        </div>
                    </div>
                </div>
                	<button name="action_submit" type="submit" value="Add Photo" class="ybtn ybtn-primary ybtn-small ytype">
											<span>新增相片</span>
				</button>
			</form>
            </div>
							
							</div>

							<div class="hidden" id="url-uploader">





								<form name="upload_new_photo_http" method="POST"
									id="upload_new_photo_http" enctype="multipart/form-data"
									class="yform ytype"
									action="${siteurl}events/addphoto.htm">
									<input type="hidden"
										value="${event.id}"
										class="csrftok" name="eventinfo.id"> <label for="url">為圖片加入
										URL</label> <input required="required" type="text" value="" name="url"> <label
										for="caption">新增一個說明字幕</label>

									<textarea name="caption"></textarea>


									<button class="ybtn ybtn-primary ytype" value="Add Photo"
										type="submit" name="action_submit">
										<span>新增相片</span>
									</button>
									<input type="hidden" value="true" name="create_flow"> <input
										type="submit" class="strong_pseudolink" value="跳過此步驟"
										name="action_skip">
								</form>
							</div>


						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- google_ad_section_start(weight=ignore) -->
		<!-- <a href="/biz/outlook-autumn-market-fundamental-catwalk-flimsy-roost-legibility-individualism-grocer-predestination-2">yelp</a> -->
		[#include "/theme/yelp/common/footer.html"]

       
	</div>
<script type="text/javascript">



J = jQuery;
//require('dmuploader');

$.album = $.extend( {}, {
    
    addFile: function(id, i, file){
		var filename = file.name;
		if (filename && filename.length > 30) {
			filename = filename.substring(0, 30) + '...';
		}
		var template = '<div id="album-file' + i + '" class="uploader-item">' +
						   '<button type="button" class="close uploader-close" data-action="remove-album"><span>×</span></button>' +
		                   '<div class="uploader-image-preview"><img src="http://placehold.it/48.png" /></div>' +
		                   '<span class="uploader-file-id">第' + (i + 1) + '张</span> - <span class="uploader-file-name">' + filename + '</span> <span class="uploader-file-size">(' + $.album.humanizeSize(file.size) + ')</span><br />状态: <span class="uploader-file-status">等待上传</span>'+
		                   '<div class="progress active">'+
		                       '<div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;">'+
		                           '<span class="sr-only">0% Complete</span>'+
		                       '</div>'+
		                   '</div>'+
		                   '<input type="hidden" name="images" value=""/>' +
		               '</div>';
		               
		var i = $(id).attr('file-counter');
		if (!i){
			$(id).empty();
			i = 0;
		}
		
		i++;
		
		$(id).attr('file-counter', i);
		
		$(id).prepend(template);
	},
	
	updateFileStatus: function(i, status, message){
		$('#album-file' + i).find('span.uploader-file-status').html(message).addClass('uploader-file-status-' + status);
	},
	
	updateFileData: function(i, data){
		$('#album-file' + i).find('input').val(data.data);
	},
	
	updateFileProgress: function(i, percent){
		$('#album-file' + i).find('div.progress-bar').width(percent);
		
		$('#album-file' + i).find('span.sr-only').html('已上传 ' + percent);
	},
	
	humanizeSize: function(size) {
      var i = Math.floor( Math.log(size) / Math.log(1024) );
      return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
    }

  }, $.album);

$('#drag-and-drop-zone').dmUploader({
	url : '${siteurl}image/upload.htm',
	dataType : 'json',
	allowedTypes : 'image/*',
	maxFiles : 6,
	onBeforeUpload : function(id) {
		$.album.updateFileStatus(id, 'default', '上传中...');
	},
	onNewFile : function(id, file) {
		$.album.addFile('#upload-albums', id, file);

		/*** 预览图片加载 ***/
		if (typeof FileReader !== "undefined") {

			var reader = new FileReader();

			// 获取最后添加的图片
			var img = $('#upload-albums').find('.uploader-image-preview>img').eq(0);

			reader.onload = function(e) {
				img.attr('src', e.target.result);
			};

			reader.readAsDataURL(file);

		} else {
			// 如果比支持 FileReader 清空所有预览
			$('#upload-albums').find('.uploader-image-preview').remove();
		}
	},
	onUploadProgress : function(id, percent) {
		var percentStr = percent + '%';
		$.album.updateFileProgress(id, percentStr);
	},
	onUploadSuccess : function(id, data) {
		$.album.updateFileStatus(id, 'success', '上传完成');
		$.album.updateFileProgress(id, '100%');
		$.album.updateFileData(id, data);
	},
	onUploadError : function(id, message) {
		$.album.updateFileStatus(id, 'error', '上传文件出错');
	},
	onFilesMaxError : function (file) {
		alert('图片个数已达限制');
	}
});

$(document).on('click', 'button[data-action="remove-album"]', function () {
	$(this).closest('div').remove();
	
	var i = $('#upload-albums').attr('file-counter');
	if (parseInt(i) > 0) {
		$('#upload-albums').attr('file-counter', i - 1);
	}
});

</script>


</body>

</html>